<template>
  <div class="all" ref="box">
    <div class="top">
      <header>
        <div class="div">
          <img src="../../../assets/返回.png" @click="back()" alt="">
          <span class="solid" @click="back()">返回</span>
        </div>
        <div class="div">
          <span>我的随笔</span>
        </div>
        <div class="div" @click="add">
          <img src="../../../assets/蓝添加.png" alt="">
          <span class="solid">新增</span>
        </div>
      </header>
      <div class="screen" @click="riqiShow=true">
        <span style="display: flex;align-items: center" >选择日期</span>
        <span>
          <span class="inputBorder"> {{startDate}}</span>
          <span style="margin: 0 10px">至</span>
          <span class="inputBorder"> {{endDate}}</span>
        </span>
<!--        <img style="width: 10px;height: 5px;margin-left: 5px" src="../../../assets/imageZhaoPin/下拉@2x.png" alt="">-->
      </div>
    </div>
    <van-pull-refresh v-model="isShuaLoading" @refresh="onRefresh">
      <van-empty
        style="width: 100%;height: 60%"
        v-show="dataList.length <= 0"
        class="custom-image"
        :image="require('../../../assets/空两本书.png')"
        description="暂无随笔记录"
      />
      <div class="box" v-for="(item, index) in dataList" :key="index"
      @click="lookHis(item)"
      >
          <p>
            <span class="img"><img src="../../../assets/保险编号.png" alt=""></span>
            <span class="text">所属模块：{{item.menu_name}}</span>
          </p>
          <p>
            <span class="img"></span>
            <span class="text">记录摘要：{{item.content}}</span>
          </p>
          <p>
            <span class="img"></span>
            <span class="text">
               记录日期：{{item.created_at}}
            </span>
          </p>
        <p class="pBtn">
<!--          <button @click.stop="update(item, index)">修改</button>-->
          <button class="delete" @click.stop="clickDel(item, index)">删除</button>
        </p>
      </div>
      <van-loading v-show="isLoading" size="24px" style="width: 100%;height: 40%;
      display:flex;align-items:center;justify-content:center; color: #1da4f2" vertical>
        加载中...
      </van-loading>
    </van-pull-refresh>

    <van-calendar v-model="riqiShow"
                  :min-date="minDate"
                  :max-date="maxDate"
                  :value="selectDate"
                  :show-confirm="false"
                  :round="false"
                  type="range"
                  color="#1da4f2"
                  @confirm="onConfirm"
                  position="right" />
    <van-dialog v-model="delshow"
                width="80%"
                confirm-button-color="#1da4f2"
                title="确认删除这条笔记吗？"
                @confirm="delConfirm()"
                show-cancel-button>
    </van-dialog>
  </div>
</template>

<script>
import {Toast} from 'vant'
export default {
  name: 'InformalEssay',
  data () {
    return {
      minDate: new Date(2017, 0, 1),
      maxDate: new Date(),
      selectDate: '',
      riqiShow: false,
      startDate: '',
      endDate: '',
      dataList: [],
      ITEM: '',
      ITEMindex: '',
      delshow: false,
      page: 1,
      isScroll: true,
      isLoading: false,
      isShuaLoading: false
    }
  },
  mounted () {
    this.startDate = this.formatDate(new Date('2019-10-01'))
    // this.startDate = this.formatDate(new Date().setDate((new Date().getDate() - 7)))
    this.endDate = this.formatDate(new Date())
    this.getData()
    window.addEventListener('scroll', this.scrollBottom, true)
  },
  methods: {
    // 下拉刷新
    onRefresh () {
      setTimeout(() => {
        Toast('刷新成功')
        this.isShuaLoading = false
        this.page = 1
        this.getData()
      }, 1000)
    },
    // 滚动事件
    scrollBottom () {
      let scrollTop = this.$refs.box.scrollTop
      let clientHeight = this.$refs.box.clientHeight
      let scrollHeight = this.$refs.box.scrollHeight
      if (scrollHeight - scrollTop <= clientHeight + 300 && this.isScroll === true) {
        this.isScroll = false
        setTimeout(() => {
          this.page += 1
          this.isLoading = true
          // 移除滚动事件
          window.removeEventListener('scroll', this.scrollBottom, true)
          this.getData()
        }, 500)
      }
    },
    // 修改
    update (item, index) {
      this.$router.push({path: '/addEssay', query: {id: item.id, isEdit: 1}})
      window.removeEventListener('scroll', this.scrollBottom, true)
    },
    // 点击删除按钮
    clickDel (item, index) {
      this.ITEM = item
      this.ITEMindex = index
      this.delshow = true
    },
    // 确认删除
    delConfirm () {
      this.$http.delEssay({id: this.ITEM.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.dataList.splice(this.ITEMindex, 1)
            Toast('删除成功')
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    lookHis (item) {
      // this.$router.push({path: '/addEssay', query: {id: item.id, isEdit: 0}})
      // window.removeEventListener('scroll', this.scrollBottom, true)
      this.$router.push({path: '/addEssay', query: {id: item.id, isEdit: 1}})
      window.removeEventListener('scroll', this.scrollBottom, true)
    },
    add () {
      this.$router.push({path: '/addEssay'})
      window.removeEventListener('scroll', this.scrollBottom, true)
    },
    getData () {
      this.isLoading = true
      this.$http.miniessay_list({startDate: this.startDate, endDate: this.endDate, page: this.page})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            // this.dataList = res.data.data
            var _this = this
            if (Number(this.page) === 1) {
              this.dataList = []
              this.dataList = res.data.data
            } else {
              res.data.data.forEach(function (current, index, arr) {
                _this.dataList.push(current)
              })
            }
            if (res.data.data.length > 0) {
              window.addEventListener('scroll', this.scrollBottom, true)
              this.isScroll = true
            } else {
              window.removeEventListener('scroll', this.scrollBottom, true)
              this.isScroll = false
            }
            this.isLoading = false
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 点击选择日期
    onConfirm (date) {
      const [start, end] = date
      this.riqiShow = false
      // this.selectDate = `${this.formatDate(start)} - ${this.formatDate(end)}`
      this.startDate = this.formatDate(start)
      this.endDate = this.formatDate(end)
      this.getData()
    },
    formatDate (date) {
      var date = new Date(date)
      var YY = date.getFullYear() + '-'
      var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
      //
      // var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      //
      // var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
      //
      // var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())

      return YY + MM + DD
    },
    // 返回
    back () {
      this.$router.history.go(-1)
      window.removeEventListener('scroll', this.scrollBottom, true)
    }
  },
  destroyed () {
    window.removeEventListener('scroll', this.scrollBottom, true)
  }
}
</script>

<style scoped>
/deep/ .van-calendar__body{
  margin-bottom: 50px;
}
  .all{
    width: 100%;
    height: 100%;
    overflow: auto;
    background: #FAF9FE;
    font-family: "PingFang SC";
  }
  .top{
    position: sticky;
    top: 0;
    z-index: 9;
    background: white;
  }
 header{
     width: 100%;
     height: 44px;
     display: flex;
     align-items: center;
     border-bottom: 1px solid #E5E5E5;
   }
   .div{
     width: 33%;
     height: 100%;
     display: flex;
     align-items: center;
     font-family: "PingFang SC";
     font-size: 15px;
     font-weight: bold;
   }
   .div img{
     margin-right: 5px;
   }
   .div:nth-child(1) img{
     height: 13px;
     width: 7px;
     margin-left: 15px;
   }
   .div:nth-child(3) img{
     width: 13px;
     height: 13px;
     margin-right: 3px;
   }
   .div:nth-child(3) span{
     margin-right: 15px;
   }
   .div:nth-child(2){
     justify-content: center;
   }
   .div:nth-child(3){
     justify-content: flex-end;
   }
   .solid{
     color: #1DA4F2;
   }
  .screen{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    box-sizing: border-box;
    background: white;
    font-size: 15px;
  }
  .screen span{
    display: flex;
    align-items: center;
  }
  .box{
    width: 95%;
    margin: 10px auto;
    background: white;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
  }
  .box p{
    width: 100%;
    height: 25px;
    display: flex;
    align-items: center;
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
  }
  .box .img{
    width: 15px;
    height: 15px;
    margin-right: 8px;
    display: block;
  }
  .box .img img{
    width: 15px;
    height: 15px;
  }
  .text{
    width: 85%;
    /*//单行*/
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    display: block;
  }
  .box p button{
    width: 60px;
    height: 29px;
    background: transparent;
    border-radius: 4px;
    color: #1DA4F2;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #1DA4F2;
  }
  .box ul li p:nth-child(2){
    display: block;
  }
  .pBtn{
    height: 44px !important;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .pBtn button{
    margin-left: 15px;
  }
  .delete{
    background: transparent !important;
    border: 1px solid #E5E5E5 !important;
    color: #333!important;
  }
.inputBorder{
  width: 100px;
  height: 29px;
  border: 1px solid #1DA4F2;
  border-radius: 4px;
  text-align: center;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
